<template>
    <!-- 人员工作效率展示表 -->
    <div id="main3" style="width: 600px; height: 340px;"></div>
</template>

<script lang="ts" setup>
import { onMounted, defineProps, ref, watch } from 'vue'
import * as echarts from 'echarts';

onMounted(() => {

    var chartDom = document.getElementById('main3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['ikun1', 'ikun2', 'ikun3', 'ikun4', 'ikun5', 'ikun6', 'ikun7']
        },
        series: [
            {
                name: 'xhz1',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [3, 2, 3, 2, 2, 1, 1]
            },
            {
                name: 'xhz2',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [1, 5, 4, 4, 1, 1, 1]
            },
            {
                name: 'xhz3',
                type: 'bar',
                stack: 'total',
                itemStyle: { color: "#ff4500" },
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [1, 2, 3, 6, 5, 3, 1]
            },
        ]
    };

    option && myChart.setOption(option);
})

</script>

<style lang="scss" scoped></style>
